這個範例是有四個 tab 選單，當選取到的時候會變成灰色，再點擊其他的 tab 時，原先的 tab 就會變回預設樣式，新點擊的 tab 又變成灰色狀態。

HTML

 <header>
    <nav class="tab-menu">
      <ul class="tabs">
        <li class="tab">
          <a href="#" class="tab-text">平台簡介</a>
        </li>
        <li class="tab">
          <a href="#" class="tab-text">課程報名</a>
        </li>
        <li class="tab">
          <a href="#" class="tab-text">講師介紹</a>
        </li>
        <li class="tab">
          <a href="#" class="tab-text">關於我們</a>
        </li>  
      </ul>
    </nav>
  </header>

CSS

.tab-menu {
    margin-top: 1em;
    background: #fff;
    box-sizing: border-box;
}

.tabs {
    padding: 0;
    margin: 0;
}

.tab {
    list-style: none;
    display: inline-block;
    background: #50b599;
    color: #2f705e;
    border-radius: 10px 10px 0 0;
}
.tab .tab-text {
    padding: 1em 1.5em;
    display: inline-block;
    text-decoration: none;
    color: #2f705e;
}
.tab.active {
  background: #f1f1f1;
}
.tab.active a {
  color: #50b599;
}

JS

$(document).ready(function() {
  $('.tab').on('click', function() {
    $('.tab').removeClass('active');
    $(this).addClass('active');
  });
});

從 CSS 上是利用 tab 有 acitve 這個 class 時，做出背景與文字顏色的變化，因此選擇不同的 tab ，就會有相對的的 tab 加上 active 類別。

HTML 方面使用 list，ul, li 的方式來產生 tab ，每一個 tab 給予一個 tab 的 className，在 Javascript 程式碼裡，我們首先綁定了每一個 tab 的點擊事件，在程式邏輯上我們先將所有的 tab 都利用 removeClass 這個方法來移除 active 類別，接著使用 $(this)，$(this) 可以選取到當下我們點擊的那個 tab ，選取到之後就利用 addClass 這個方法讓 active 類別可以加上去就完成了這個範例。